import { useDispatch, useSelector } from "react-redux"
import { increment,decrement,incrementByAmount } from './../features/counter/counterSlice'

const Counter = () => {
    const count = useSelector((state) => state.counter.value)
    const dispatch = useDispatch()

    return (
        <div>
            <div>
                <button
                    aria-label="Increment value"
                    onClick={() => dispatch(increment())}
                >
                    Increment
                </button>
                <span style={{ marginLeft: '10px',marginRight: '10px'}}>{count}</span>
                <button
                    aria-label="Decrement value"
                    onClick={() => dispatch(decrement())}
                >
                    Decrement
                </button>

                <button
                    style={{ marginLeft: '10px',marginRight: '10px'}}
                    aria-label="Decrement value"
                    onClick={() => dispatch(incrementByAmount(3))}
                >
                    incrementByAmount
                </button>
            </div>
        </div>
    )
}

export default Counter